import React from 'react';
import { WeaFormItem, WeaTableEditable,WeaSearchGroup,
    WeaHelpfulTip, WeaInput, WeaSelect, WeaCheckbox, WeaColorPicker , WeaInputNumber} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EType from './base/EType';
import ETitle from './base/ETitle';
import ELinkMode from './base/ELinkMode';
import EPortalBrowser from './base/EPortalBrowser';
import DataSourceTable from './base/DataSourceTable';
import { Button, Modal, Row, Col } from "antd";
import {WeaMaterialLib} from 'weaPortalPublic';

// 快捷入口元素
export default class Content_QuickEntry extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            datas: this.props.datas || [],
            eShowMode: this.props.showMode || '1',
            eShowNum: this.props.eShowNum || '5',
            eLayout: this.props.eLayout || '0',
            eWidth: this.props.eWidth || '75',
            eHeight: this.props.eHeight || '75',
            eTitleRow: this.props.eTitleRow || '0',
            eTitleColor: this.props.eTitleColor || '#000',
        }
        this.getRowSelection = this.getRowSelection.bind(this);
    }

    getRowSelection(rowSelection){
        const { userid='' } = this.props;
        const sel = { ...rowSelection };
        sel.getCheckboxProps = record => {
            return { disabled: userid != '1' && record.userid === "1"};
        };
        return sel;
    };


    render() {
        const { datas, eShowMode, eShowNum, eTitleColor, eLayout, eWidth, eHeight, eTitleRow } = this.state;
        const {hpid, eid, ebaseid, synergyParams, userid} = this.props;
        let __DataSourceTable = <DataSourceTable ecId={`${this && this.props && this.props.ecId || ''}_DataSourceTable@sz5own`} ref="dataSourceTable" hpid={hpid} eid={eid} ebaseid={ebaseid} {...this.props.eTabs} synergyParams={synergyParams} tabList={datas} userid={userid} isCustomAdd = {this.props.isCustomAdd} eShareLevel={this.props.eShareLevel} subCompanyId={this.props.subCompanyId}/>;

        const itemData = [
            {
                id: "0",
                name: getLabel(515771,'上下布局-无背景色/分割线') ,
                filepath: "/spa/portal/images/quickentry/showmoude0.png",

            },{
                id: "1",
                name: getLabel(515772,'上下布局-有分割线') ,
                filepath: "/spa/portal/images/quickentry/showmoude1.png",
            },{
                id: "2",
                name: getLabel(515773,'上下布局-有背景色') ,
                filepath: "/spa/portal/images/quickentry/showmoude2.png",
            },{
                id: "3",
                name: getLabel(515774,'左右布局-无背景色/分割线') ,
                filepath: "/spa/portal/images/quickentry/showmoude3.png",
            },{
                id: "4",
                name: getLabel(515775,'左右布局-有分割线') ,
                filepath: "/spa/portal/images/quickentry/showmoude4.png",
            },{
                id: "5",
                name: getLabel(515776,'左右布局-有背景色') ,
                filepath: "/spa/portal/images/quickentry/showmoude5.png",
            }
        ];
        let EPerNum = <div></div>;
        let ELayout = <div></div>;
        let EShowType = <div></div>;
        let ImgWidthHeight = <div></div>;
        let ETitleColor = <div></div>;
        let ETitleRow = <div></div>;

        ELayout = (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@w55bfy`} label={getLabel(19407,'布局') } labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@tvvdl3`} value={eLayout} options={[
                    {key: '0',showname: getLabel(515777,'靠左对齐') , selected: true},
                    {key: '1', showname: getLabel(128965,'居中对齐') }
                ]} detailtype = {3} onChange={value => this.setState({eLayout: value})}/>
            </WeaFormItem>
        );
        EPerNum = (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ct442y`} label={getLabel(515778,'每行显示数量') } labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@to3e3p`} value={eShowNum} style={{width: '100px'}} onChange={value => this.setState({eShowNum: value})}/>
                <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@b0rjp4`} style={{marginLeft: '10px',
                    marginBottom: '5px', display: 'inline-block'}} title={getLabel(515779,'为0时,根据元素宽度自动换行') }/>
            </WeaFormItem>
        );
        ImgWidthHeight = (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@1twcuc`} label={getLabel(521487, '图标大小')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <ul style={{lineHeight: '29px'}}>
                    <li style={{display: 'inline-block'}}>
                        <span>
                            <span style = {{marginRight: '20px',}}>
                                <span>{getLabel(386529, '宽度：')}</span>
                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@dlr2rh`}
                                    value={eWidth}
                                    style={{width: '80px', marginRight: '8px', marginBottom: '4px'}}
                                    onChange={value => this.setState({eWidth:  value})}
                                />
                                px
                            </span>
                            <span style={{marginLeft: '12px'}}>
                                <span>{getLabel(386530, '高度：')}</span>
                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@h3ycza`}
                                    value={eHeight}
                                    style={{width: '80px', marginRight: '8px', marginBottom: '4px'}}
                                    onChange={value => this.setState({ eHeight: value})}
                                />
                                px
                            </span>
                        </span>
                    </li>
                </ul>
            </WeaFormItem>
        );
        EShowType = (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@j4nfqg`} label={getLabel(23724,'显示样式') } labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <EPortalBrowser ecId={`${this && this.props && this.props.ecId || ''}_EPortalBrowser@552hha`}
                    itemData={itemData}
                    title={getLabel(515780,'选择元素样式') }
                    multiCheck={false}
                    disabled={false}
                    value={eShowMode}
                    isShow={true}
                    onChange={(value)=>{
                        this.setState({eShowMode: value})
                    }}
                />
            </WeaFormItem>
        );

        ETitleColor = (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@9s7urj`} label={getLabel(2076,'字体颜色') } labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@4mcj5k`}
                    value={eTitleColor}
                    onChange={(v)=> this.setState({eTitleColor: v})}
                />
            </WeaFormItem>
        );
        ETitleRow = (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@08f5mt`} label={getLabel(521486, '标题自动换行')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@kya4ma`}
                    className="isETitleRow"
                    value={eTitleRow}
                    display="switch"
                    style={{display: 'inline'}}
                    onChange={value => {
                        this.setState({eTitleRow : value})
                    }}
                />
                <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@k6h6bc`} style={{marginLeft: '10px',
                    marginBottom: '5px', display: 'inline-block'}} title={getLabel(521180,'开启时，内容来源标题过长时自动换行，最多显示两行，超出第二行的部分显示“...”；关闭时，超出首行的部分显示“...”') }/>
            </WeaFormItem>

        );

        return (
            <div>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@sxstw9`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true}>
                    <EType ecId={`${this && this.props && this.props.ecId || ''}_EType@8vpv55`} ref="eType" value={this.props.eBaseName}/>
                    {this.props.eShareLevel == '2' ? <ETitle ecId={`${this && this.props && this.props.ecId || ''}_ETitle@txaj0z`} ref="eTitle" eid={this.props.eid} value={this.props.eTitle} {...this.props}/> : ''}
                    {this.props.eShareLevel == '2' ? EShowType : ''}
                    {EPerNum}
                    {this.props.eShareLevel == '2' ? ImgWidthHeight : ''}
                    {this.props.eShareLevel == '2' ? ELayout : ''}
                    {this.props.eShareLevel == '2' ? ETitleColor : ''}
                    {this.props.eShareLevel == '2' ? ETitleRow : ''}
                    <ELinkMode ecId={`${this && this.props && this.props.ecId || ''}_ELinkMode@4qylzk`} ref="eLinkMode" options={this.props.eLinkMode.options} value={this.props.eLinkMode.selected != '1' ? '2' :this.props.eLinkMode.selected }/>
                </WeaSearchGroup>
                {__DataSourceTable}
            </div>
        );
    }

    getSaveValues() {
        if(this.table && !this.table.doValidate().pass) return;
        const datasnew = this.state.datas.map((item, index) => {
            if(!item.orderNum || item.orderNum=='-1' || !item.data.orderNum) {
                item.orderNum = index;
                item.data.orderNum = index;
            }
            return item;
        })
        return {
            eContentTitle: this.refs['eTitle'] ? this.refs['eTitle'].getSaveValues() : this.props.eTitle,
            eContentLinkMode: this.refs['eLinkMode'].getSaveValues(),
            eContentShowMode: this.state.eShowMode,
            eContentTitleColor: this.state.eTitleColor,
            eContentLayout: this.state.eLayout,
            eContentShowNum: this.state.eShowNum,
            eWidth: this.state.eWidth,
            eHeight: this.state.eHeight,
            eTitleRow: this.state.eTitleRow,
            subCompanyId: this.props.subCompanyId,
            eContentDatas: datasnew
        };
    }
}